<template>
    <div class="nav">
        <a-menu mode="inline" :open-keys='openKeys' style="width: 100%" @openChange="onOpenChange"
            :default-selected-keys="defaultSelectedKeys" :default-open-keys="defaultOpenKeys">
            <a-sub-menu v-for="item in menu" :key="item.key">
                <span slot="title">
                    <a-icon :type="item.icon" />
                    <span>{{ item.title }}</span>
                </span>
                <a-menu-item v-for="c in item.children" :key="c.key" @click="toNext(c.path, item.key, c.key)">
                    {{ c.title }}
                </a-menu-item>

            </a-sub-menu>
        </a-menu>
    </div>
</template>
<script>
import { menu } from "@/router";
import { mapActions, mapState } from "vuex";
export default {
    data() {
        return {
            rootSubmenuKeys: ["sub1", "sub2", "sub3", "sub4", "sub5", "sub6", "sub7", "sub8"],
            menu: menu,
            // openkeys: []

            //m默认数据


        };
    },
    computed: {
        ...mapState(["defaultSelectedKeys", 'defaultOpenKeys', 'openKeys'])

    },
    mounted() {
        // console.log(this.$router)
    },
    created() {

    },
    methods: {
        ...mapActions(['getkeys']),

        onOpenChange(keys) {
            // console.log(keys)
            const latestOpenKey = keys.find(
                (key) => this.openKeys.indexOf(key) === -1
            );
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                // this.$store.state.openKeys = keys;
                this.$store.commit('setconfiguration', keys)
            } else {
                // this.$store.state.openKeys = latestOpenKey ? [latestOpenKey] : [];
                this.$store.commit('setconfiguration', latestOpenKey ? [latestOpenKey] : [])
            }
        },
        //解决初始化页面跳转
        toNext(path, Levelkey, key) {
            // console.log([Levelkey], key)
            window.localStorage.setItem('Levelkey', Levelkey)
            window.localStorage.setItem('key', key)
            this.getkeys()
            this.$router.push(path);
        },
    },
};
</script>
<style lang="less" scoped>
.nav {
    width: 216px;
    height: calc(100vh - 50px); // box-sizing: border-box;
    // border: 1px solid #000;
    min-width: 216px;
    background-color: #fff;

    .ant-menu {
        width: 100%;
    }
}
</style>